// 计算font-size值
function setFont() {
    // 获取浏览器的宽度
    let htmlWidth = document.querySelector('html').clientWidth
    // 找到临界点，判断最大宽度和最小宽度
    if (htmlWidth < 1024) htmlWidth = 1024
    if (htmlWidth > 1920) htmlWidth = 1920
    
    // 计算fontSize
    let fontSize = htmlWidth / 80 + 'px'
    // 把fontSize值，设置给html元素即可
    document.querySelector('html').style.fontSize = fontSize
}

setFont()   //刷新页面，马上计算font-size值

window.addEventListener('resize', function () {
    setFont()    
})

// 按钮
let data = []
$('button').on('click', function () {
    // 获取元素
    let uname = document.querySelector('.uname')
    let score = document.querySelector('.score')
    let salary = document.querySelector('.salary')

    // tr模板字符串
    let tr = `
    <tr>
       <td>${uname.value}</td>
       <td>${score.value}</td>
       <td>${salary.value}</td>
    </tr>
    `
    // 创建对象
    let obj = {}
    obj.uname = uname.value
    obj.score = score.value
    obj.salary = salary.value
    // console.log(obj);

    
    data.push(obj)
//    console.log(data);
    
    $.each(data, function (index,item) {
        option1.xAxis.data[index] = item.uname
        option1.series[0].data[index] = item.score
        
        option2.xAxis.data[index] = item.uname
        option2.series[0].data[index] = item.salary

        myChart.setOption(option1)
        myChart2.setOption(option2)

})

    // 给tbody中插入tr
    $('table tbody').append(tr)

    // 清空输入框
    uname.value = ''
    score.value = ''
    salary.value = ''
})

// 图表
// 折线图
        let myChart = echarts.init($('.line')[0])
        let option1 = {
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#2980b9'
                },
                {
                    offset: 1,
                    color: '#6dd5fa'
                }
            ], false),
            title: {
                // text: "OCTOBER 2015",
                left: "center",
                bottom: "5%",
                textStyle: {
                    color: "#fff",
                    fontSize: 16
                }
            },
            grid: {
                top: '20%',
                left: '10%',
                right: '10%',
                bottom: '15%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLabel: {
                    margin: 30,
                    color: '#ffffff63'
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    length: 25,
                    lineStyle: {
                        color: "#ffffff1f"
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff1f'
                    }
                }
            },
            yAxis: [{
                name: "评分",
                nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 16,
                    padding: [0, 0, 10, -20]
                },
                type: 'value',
                position: 'left',
                axisLabel: {
                    margin: 0,
                    color: '#ffffff63'
                },
        
                axisTick: {
                    show: true,
                    length: 15,
                    lineStyle: {
                        color: "#ffffff1f",
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff1f'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                }
            }],
            series: [{
                name: '注册总量',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#fff", // 线条颜色
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    color: "#FC5C7D",
                    borderColor: "#fff",
                    borderWidth: 3
                },
                tooltip: {
                    show: false
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#eb64fb'
                            },
                            {
                                offset: 1,
                                color: '#3fbbff0d'
                            }
                        ], false),
                    }
                },
                data: []
            }]
        };
        // 3、创建图表
    // myChart.setOption(option1)



// 柱状图

    let myChart2 = echarts.init($('.zx')[0])
    
  
     let option2= {
        backgroundColor: "#65C7F7", //背景色
        tooltip: {
            trigger: "axis",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            // borderRadius: 5,
            // borderColor: "#6baab2",
            // borderWidth: 1,
            formatter: function (params) { // params[0].data.nameCode
                let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
                return (
                    params[0].name +
                    "<br>" +
                    "杆塔数量 ：" +
                    params[0].value
                );
            }
        },
        grid: {
            left: "4%",
            right: "4%",
            bottom: "7%",
            top: "15%",
            containLabel: true
        },
        xAxis: {
            data: [],
            triggerEvent: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                rotate: 0,
                interval: 0,
                textStyle: {
                    padding: [14, 0, 0, 0],
                    fontSize: 14,
                    color: "rgba(255,255,255,1)"
                }
            }
        },
        yAxis: {
            name: "薪资",
            triggerEvent: true,
            nameTextStyle: {
                color: "rgba(255,255,255,1)",
                fontSize: 16,
                padding: [0, 0, 10, -20]
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,.3)'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgb(148,159,167)",
                    fontSize: 16
                }
            }
        },
         series: [{
            data: [],
            name: "数量",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    //barBorderRadius: 5,
                    //渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#01EAED"
                    },
                    {
                        offset: 0.5,
                        color: "#02C4DD"
                    },
                    {
                        offset: 1,
                        color: "#029ED9"
                    }
                    ])
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                        fontSize: 20
                    }
                }
            },
            
            z: 10
        },
        {
            name: "hill",
            type: "bar",
            barWidth: '20%',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    color: "rgba(11,47,68,.8)"
                }
            },
           
        }
        ]
    }

    // 3、创建图表
    // myChart2.setOption(option2)
